<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" content="详情" />
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '100%' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          size="small"
          label-width="100px"
          label-position="top"
        >
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="基本信息">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考试名称" prop="fullName">
                <p>{{ dataForm.fullName }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="试卷名称" prop="examPaperId">
                <p>{{ dataForm.examPaperId }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考试目录" prop="categoryId">
                <p>
                  {{ dataForm.categoryId | dynamicTreeText(categoryIdOptions) }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开始时间" prop="startDatetime">
                <p>{{ jsbos.dateFormat(dataForm.startDatetime) }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="截至时间" prop="endDatetime">
                <p>{{ jsbos.dateFormat(dataForm.endDatetime) }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考试时长" prop="examLength">
                <p>{{ dataForm.examLength }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="及格线" prop="passLine">
                <p>{{ dataForm.passLine }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="考试介绍" prop="description">
                <p>{{ dataForm.description }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="学习证书设置">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证书模板" prop="certificateId">
                <p>{{ dataForm.certificateId }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="防作弊">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="试题随机打乱"
                prop="preventionQuestionRandomizes"
              >
                <p>{{ dataForm.preventionQuestionRandomizes }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="选项随机打乱"
                prop="preventionItemRandomizes"
              >
                <p>{{ dataForm.preventionItemRandomizes }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="切屏多少次后自动交卷"
                prop="preventionToggleScreen"
              >
                <p>{{ dataForm.preventionToggleScreen }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="切屏多少秒后自动交卷"
                prop="preventionToggleScreenSecond"
              >
                <p>{{ dataForm.preventionToggleScreenSecond }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="人脸识别" prop="preventionFace">
                <p>{{ dataForm.preventionFace }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="ip限制" prop="preventionIp">
                <p>{{ dataForm.preventionIp }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="考试地址限制" prop="preventionAddr">
                <p>{{ dataForm.preventionAddr }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="考试设置">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否允许重复考试" prop="examRepeat">
                <p>{{ dataForm.examRepeat }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="考试次数设置" prop="examRepeatType">
                <p>
                  {{
                    dataForm.examRepeatType | dynamicText(examRepeatTypeOptions)
                  }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重复次数" prop="examRepeatNum">
                <p>{{ dataForm.examRepeatNum }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="试卷及试卷答案解析设置" prop="examAnswers">
                <p>
                  {{ dataForm.examAnswers | dynamicText(examAnswersOptions) }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="开卷考试" prop="examOpen">
                <p>{{ dataForm.examOpen }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="考试签名" prop="examSign">
                <p>{{ dataForm.examSign }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="通过后是否允许参加考试" prop="examPass">
                <p>{{ dataForm.examPass }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="评分方式">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="填空题评分" prop="examCompletionGrading">
                <p>{{ dataForm.examCompletionGrading }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="问答题评分" prop="examEssayGrading">
                <p>{{ dataForm.examEssayGrading }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="学习奖励">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="学时" prop="learningPeriod">
                <p>{{ dataForm.learningPeriod }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="学分" prop="learningCredit">
                <p>{{ dataForm.learningCredit }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="积分" prop="learningIntegral">
                <p>{{ dataForm.learningIntegral }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="可见范围">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="可见范围" prop="examScope">
                <p>{{ dataForm.examScope | dynamicText(examScopeOptions) }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <groupTitle content-position="left" content="设置阅卷人">
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="阅卷人" prop="examinerUserIds">
                <p>{{ dataForm.examinerUserIds }}</p>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态" prop="enabledMark">
                <p>
                  {{ dataForm.enabledMark | dynamicText(enabledMarkOptions) }}
                </p>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
    </div>
  </transition>
</template>
<script>
import { getDetail } from "@/views/exam/api/manager";

export default {
  components: {},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printId: "",
      dataForm: {
        id: "",
        fullName: "",
        examPaperId: "",
        categoryId: "",
        startDatetime: 1725065385000,
        endDatetime: 1725065385000,
        examLength: 30,
        passLine: 60,
        description: "",
        certificateId: "",
        preventionQuestionRandomizes: 0,
        preventionItemRandomizes: 0,
        preventionToggleScreen: 30,
        preventionToggleScreenSecond: 30,
        preventionFace: 0,
        preventionIp: 0,
        preventionAddr: 0,
        examRepeat: 0,
        examRepeatType: "custom",
        examRepeatNum: 1,
        examAnswers: "custom",
        examOpen: 0,
        examSign: 0,
        examPass: 0,
        examCompletionGrading: 0,
        examEssayGrading: 0,
        learningPeriod: 1,
        learningCredit: 1,
        learningIntegral: 1,
        examScope: "custom",
        examinerUserIds: "",
        creatorUserId: "",
        creatorTime: "",
        enabledMark: "0",
      },
      categoryIdOptions: [
        {
          children: [{ fullName: "选项1-1", id: "2" }],
          fullName: "选项1",
          id: "1",
        },
      ],
      categoryIdProps: { children: "children", label: "fullName", value: "id" },
      examRepeatTypeOptions: [
        { fullName: "考试结束前无限制重考", id: "before" },
        { fullName: "自定义重考次数", id: "custom" },
      ],
      examAnswersOptions: [
        { fullName: "交卷后", id: "submitAfter" },
        {
          fullName: "及格后",
          id: "passAfter",
        },
        { fullName: "考试结束后", id: "examAfter" },
        { fullName: "不允许查看", id: "notAllow" },
      ],
      examScopeOptions: [
        { fullName: "全公司", id: "all" },
        { fullName: "仅创建人", id: "creator" },
        {
          fullName: "部门/人员",
          id: "selectScope",
        },
      ],
      enabledMarkOptions: [
        { fullName: "草稿", id: "0" },
        { fullName: "发布", id: "1" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      this.dataForm = _dataAll;
    },

    goBack() {
      this.$emit("refresh");
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          getDetail(this.dataForm.id).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        }
      });
    },
  },
};
</script>
